<template>
  <n-popover trigger="click">
    <template #trigger>
      <n-button :bordered="false">
        <n-avatar v-if="userInfo.userInfo?.avatar" round :size="48" :src="userInfo.userInfo?.avatar" />
        <div v-else>{{ userInfo.userInfo?.account }}</div>
      </n-button>
    </template>
    <template #header>
      <div class="text-align-center">
        <n-text strong depth="1"> {{ userInfo.userInfo?.nickname }} </n-text>
      </div>
    </template>
    <n-button block round :bordered="false" strong quaternary @click="changRoute('myInfo')">
      <template #icon>
        <n-icon>
          <PersonCircleOutline />
        </n-icon>
      </template>
      个人中心
    </n-button>
    <n-button block round :bordered="false" strong quaternary @click="changRoute('post/essay')">
      <template #icon>
        <n-icon>
          <Pencil />
        </n-icon>
      </template>
      文章管理
    </n-button>
    <template #footer>
      <n-button block round :bordered="false" strong quaternary @click="logOut">
        <template #icon>
          <n-icon>
            <LogOutOutline />
          </n-icon>
        </template>
        退出登录
      </n-button>
    </template>
  </n-popover>
</template>

<script setup lang="ts">
import { NButton, NBadge, NAvatar, NText, NPopover, NIcon } from "naive-ui";
import { getUserInfo } from "~/api/user";
// import user from "@/assets/images/user.jpg";
import {
  PersonCircleOutline,
  Pencil,
  LogOutOutline,
  LogInOutline,
} from "@vicons/ionicons5";
import userStore from "~/stores/user";
const userInfo = userStore();
const logOut = () => {
  userInfo.token = "";
  userInfo.userInfo = null;
  navigateTo("/login");
};
const changRoute = (url: string) => {
  navigateTo(`/${url}`);
};
onMounted(async () => {
  const user = userStore();
  user.userInfo = (await getUserInfo()) || null;
})
</script>
<style lang="scss" scoped></style>
